import React, { useState, useEffect } from 'react';
import { Tabs, Drawer } from 'antd';
import AlarmInfo from './alarm';
import '../../index.less';

const { TabPane } = Tabs;
const AlarmResource = ({ setVisible, visible, resourceUuid, history }) => {
    console.log(111)
    const [activeKey, setActiveKey] = useState('指标告警');
    const handleTabOnChange = (tab) => {
        setActiveKey(tab)
    };
    return (
        <Drawer 
            className="drawer-table-columns detail-field"
            title={'查看告警信息'}
            placement={'right'}
            width={1200}
            onClose={() => { setVisible(false) }}
            visible={visible}
            footer={null}
        >
            <Tabs
                defaultActiveKey={activeKey}
                size="large"
                style={{ padding: '5px 20px', background: '#fff' }}
                onChange={handleTabOnChange}
            >
               <TabPane tab="指标告警" key="指标告警">
                    {
                        activeKey == "指标告警" && <AlarmInfo history={history} alarmType={activeKey} resourceUuid={resourceUuid} />
                    }
                </TabPane>
                <TabPane tab="事件告警" key="事件告警">
                    {
                        activeKey == "事件告警" && <AlarmInfo history={history} alarmType={activeKey} resourceUuid={resourceUuid} />
                    }
                </TabPane>
            </Tabs>
        </Drawer>
    );
};

export default AlarmResource;
